<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>bootstrap表格操作</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!--<link href="resources/static/bootstrap/css/bootstrap.css" rel="stylesheet">-->
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.css">
    <script src="https://unpkg.com/bootstrap-table@1.14.2/dist/bootstrap-table.min.js"></script>
</head>
<body>
<h1 align="center">人员管理</h1>

<!--<button class="btn-danger" id="remove" style="float: left">删除</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button class="btn-primary" id="addUser">添加</button>-->

<div class="container" align="center">
    <div id="toolbar" class="btn-group">
        <button id="addUser" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
       <!-- <button id="btn_edit" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
        </button>-->
        <button id="remove" type="button" class="btn btn-default">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>

    <table id="btTable" class="table table-bordered"></table>

</div>

<!-- 模态框（Modal） 添加User-->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="ModalLabel">添加人员数据</h4>
            </div>
            <div class="modal-body">
                <form id="addForm">
                    <div class="form-group">
                        <label class="control-lable">用户名</label>
                        <input name="uname" id="username" class="form-control" type="text" placeholder="请输入用户名。。。"/>
                    </div>

                    <div class="form-group">
                        <label class="control-lable">用户名</label>
                        <input name="pwd" id="password" class="form-control" type="text" placeholder="请输入密码。。。"/>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnAddCommit" type="button" class="btn btn-primary">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

<!-- 模态框（Modal） 修改User-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改人员数据</h4>
            </div>
            <div class="modal-body">
                <form id="editForm">
                    <div class="form-group">
                        <label class="control-lable">用户名</label>
                        <input name="uname" id="uname" class="form-control" type="text" placeholder="请输入用户名。。。"/>
                    </div>

                    <div class="form-group">
                        <label class="control-lable">用户名</label>
                        <input name="pwd" id="pwd" class="form-control" type="text" placeholder="请输入密码。。。"/>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="btnEditCommit" type="button" class="btn btn-primary">提交更改</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>


<script>

    $("#addUser").click(function () {
        var d = $("#addModal").modal({
            backdrop: 'static',
            keyboard: false
        });
        d.modal('show');
    });
    $("#btnAddCommit").click(function () {
        var uname = $("#username").val();
        var pwd = $("#password").val();

        $.ajax({
            url: '/admin/addUser',
            type: 'post',
            data: {
                uname: uname,
                pwd: pwd
            },
            success: function (msg) {
                if (msg !=null) {
                    $('#editModal').modal('hide');
                    location.reload();
                } else {
                    alert("添加失败！")

                }
            }


            /*   success: function(data){
                   alert("heheh")
                   console(data);
                   $("#editModal").modal('hide');
               },*/
            // success:function(data){
            //         $('#editForm').modal('hide');
            //         //刷新当前页面
            //         window.location.reload();
            // },
            /* dataType:'json'*/
        });


    });

    $(function () {
        function addButton() {
            return [
                '<button class="btn-primary" id="btnEdit">编辑</button>&nbsp&nbsp&nbsp&nbsp&nbsp',
                '<button class="btn-danger" id="btnDelete">删除</button>'
            ].join("");
        }

        window.operateEvents = {

            "click #btnEdit": function (e, v, r, i) {
                $.get(
                    //url,后面还带了个名字，看能不能有用
                    '/admin/toEditUser',
                    //+ r.uname,
                    //data
                    {uname: r.uname},
                    //success
                    function (data) {
                        $('#editForm [name=uname]').val(data.uname),
                            $('#editForm [name=pwd]').val(data.pwd)
                    },
                    'json'
                );
                var d = $("#editModal").modal({
                    backdrop: 'static',
                    keyboard: false
                });
                d.modal('show');

            },
            "click #btnDelete": function (e, v, r, i) {

                $.post(
                    '/admin/deleteUser',
                    {uname: r.uname},
                    function (data) {
                        if (data > 0) {
                            // $(this).parents('tr').remove();
                            $("#btTable").bootstrapTable('refresh');
                        }
                    }
                );
            }

        };

        $("#btTable").bootstrapTable({
            method: 'POST',
            url: '/admin/users',
            columns: [{
                checkbox: true,
            },
                {
                    align: 'center',
                    valign: 'middle',
                    field: 'uname',
                    title: '名字'

                }, {
                    align: 'center',
                    valign: 'middle',
                    field: 'pwd',
                    title: '密码'
                }, {
                    align: 'center',
                    valign: 'middle',
                    field: "button",
                    title: "操作",
                    formatter: addButton,
                    events: operateEvents
                }
            ],
            pagination: true,
            pageNumber: 1,
            pageSize: 5,
            pageList: [2, 5, 9],
            search: true,
            showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
            striped: true,                      //是否显示行间隔色
            showExport: true,
            exportDataType: "all",
            toolbar: '#toolbar',
            showExport: true,  //是否显示导出按钮
            buttonsAlign: "right",  //按钮位置
            exportTypes: ['csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //导出文件类型
            Icons: 'glyphicon-export',
            searchOnEnterKey: true,
            paginationPreText: '上一页',
            paginationNextText: '下一页',
        });
    });


    $("#btnEditCommit").click(function () {
        var uname = $("#uname").val();
        var pwd = $("#pwd").val();

        console.log(uname);
        console.log(pwd);
        $.ajax({
            url: '/admin/editUser',
            type: 'post',
            data: {
                uname: uname,
                pwd: pwd
            },
            success: function (msg) {
                if (msg == "ojbk") {
                    $('#editModal').modal('hide');
                    location.reload();
                } else {
                    alert("修改失败！")

                }
            }


            /*   success: function(data){
                   alert("heheh")
                   console(data);
                   $("#editModal").modal('hide');
               },*/
            // success:function(data){
            //         $('#editForm').modal('hide');
            //         //刷新当前页面
            //         window.location.reload();
            // },
            /* dataType:'json'*/
        });


    });

    // 删除按钮事件
    $("#remove").on("click", function () {
        if (!confirm("是否确认删除？"))
            return;
        var rows = $("#btTable").bootstrapTable('getSelections');// 获得要删除的数据
        if (rows.length == 0) {// rows 主要是为了判断是否选中，下面的else内容才是主要
            alert("请先选择至少一个来删除！")
            return;
        } else {
            var ids = '';
            for (var i = 0; i < rows.length; i++) {
                ids += rows[i]['uname'] + ",";
            }
            ids = ids.substring(0, ids.length - 1);
            deleteMs(ids);
        }
    });

    function deleteMs(ids) {
        $.ajax({
            url: '/admin/deleteList',
            data: {ids: ids},

            type: "post",
            // dataType: "json",
            success: function (data) {
                if (data == "ojbk") {
                    alert("批量删除成功！");
                    $('#btTable').bootstrapTable('refresh');
                }else{
                    alert("error");
                }


            }
        })


    }


</script>


</body>
</html>